const Navigation = {
    template: `
      <nav
          class="fixed top-0 left-0 right-0 bg-white dark:bg-gray-900 shadow-lg backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 z-50 transition-all duration-300"
      >
        <div class="flex items-center h-16">
          <!-- Logo区域 - 与侧边栏宽度对齐 -->
          <div class="w-80 px-6 flex items-center h-full">
            <div class="flex items-center">
              <div
                  class="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg"
              >
                <i class="fa fa-graduation-cap text-white text-xl"></i>
              </div>
              <h1
                  class="ml-3 text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent whitespace-nowrap"
              >
                教学管理系统
              </h1>
            </div>
          </div>

          <!-- 导航栏主体部分 -->
          <div class="flex-1 flex items-center justify-end px-6">
            <div class="flex items-center space-x-3">
              <div class="flex items-center space-x-3 ml-3">
                <img
                    :src="adminAvatar"
                    alt="管理员头像"
                    class="h-8 w-8 rounded-xl object-cover ring-2 ring-primary"
                />
                <div class="text-left">
                  <p class="text-sm font-medium text-gray-700">{{ adminName }}</p>
                  <p class="text-xs text-gray-500">{{ adminDepartment }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    `,
    data() {
        return {
            adminAvatar: '/static/img/avatar.png',
            adminName: '管理员',
            adminDepartment: '信息学院'
        }
    },
    mounted() {
        const userInfo = JSON.parse(sessionStorage.getItem('user-info'))
        if (userInfo) {
            this.adminName = userInfo.username
        } else {
            window.location.href = '/login'
        }
    },
    methods: {}
}
Vue.component('navigation', Navigation);